<template>
    <el-row>
        <el-col :span="3" class="txt">

            <div class="title">
                <span>
                    <el-image :src="circleUrl" style="width:100%; height:100%"></el-image>
                </span>
            </div>
        </el-col>
        <el-col :span="3" class="txt">
            ssssss
        </el-col>
        <el-col :span="3" class="txt">
            ssssss
        </el-col>
        <el-col :span="3" class="txt">
            ssssss
        </el-col>
        <el-col :span="3" class="txt">
            ssssss
        </el-col>
        <el-col :span="3" class="txt">
            ssssss
        </el-col>
        <el-col :span="3" class="txt">
            ssssss
        </el-col>
        <el-col :span="3" class="txt">
            <div class="block">
                
                <el-dropdown  @command="handleCommand">
                    <span class="dropdown">
                        {{ user.name }}
                    </span>
                    <!-- <template slot="dropdown"> -->
                        <el-dropdown-menu>
                            <el-dropdown-item command="a"><i class="el-icon-search"></i>查看信息</el-dropdown-item>
                            <el-dropdown-item command="b"><i class="el-icon-edit"></i>编辑信息</el-dropdown-item>
                     
                            <el-dropdown-item command="c" divided ><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                        <!-- </template> -->
                </el-dropdown>

                <!-- </span> -->
                <span class="avatar">
                    <a :href="circleUrl" target="_blank">
                        <el-avatar :size="40" :src="circleUrl" fit="fill"></el-avatar>
                    </a>
                </span>

                <span>sss</span>
            </div>
        </el-col>

    </el-row>

    <!-- </el-col>   -->
    <!-- <el-col :span="12">
        <div class="sub-title">square</div>
        <div class="demo-basic--circle">
          <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
          <div class="block" v-for="size in sizeList" :key="size">
            <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
          </div>
        </div>
      </el-col>  -->
    <!-- </el-row> -->
</template>
<script>
import router from "../router";
import { clearStore,clearUser, getUser } from '@/util/store'

export default {
    //监听路由变化
    // $route(to, from) {
    //   this.nowPath = to.path
    //   for (let index in this.store.tags) {
    //     let storePath = this.store.tags[index].path;
    //     //分割字符，后面有带参数的，所以要控制
    //     let toSep = to.path.substring(1).split("/");
    //     let toPath="";
    //     let id = null;
    //     if(toSep.length ===  3){
    //       toPath = "/"+toSep[0]+"/"+toSep[1];
    //       id = toSep[2];
    //     }else{
    //       toPath = to.path;
    //     }
    //     if (storePath.indexOf(toPath) > -1) {
    //       this.store.tags[index].path = to.path;
    //       if(id != null){
    //         let name = this.store.tags[index].name;
    //         //要去掉“-”后面的数据
    //         if(name.indexOf("-") > -1){
    //           name = name.slice(0,name.indexOf("-"));
    //         }
    //         this.store.tags[index].name = name+"-"+id;
    //       }
    //       this.page = this.store.tags[index];
    //       let i = this.tags.indexOf(this.store.tags[index]);
    //       if (i == -1) {
    //         this.tags.push(this.store.tags[index])
    //         return;
    //       }
    //     }
    //   }
    // },
    data() {
        return {
            circleUrl: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
            sizeList: ["large", "medium", "small"],
            user: { },

        }
    },
    mounted() {
        this.user=getUser();
    },

    methods: {
        //退出登录
        logOut() {

            console.log("我被点击了");
            clearStore('TOKEN');
            clearUser();
            window.location.href = '/';
            // this.$api.get('/admin/logOut').then(res => {
            //    this.$api.clearSession();
            // this.tags = [];
            // this.store.tags = [];
            //   window.location.href = '/'
            // })
        },
        handleCommand(command){
            if (command == 'c') {
                this.logOut();
            }
        }
    }
}
</script>
<style>
* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

.title {
    height: 50px;
    text-align: left;
    align-items: left;
    padding-left: -20px;
}

.block {
    display: flex;
    height: 50px;
    padding: 12px 0px;
    /* padding: 100px; */
    /* align-items: center; */

}

.ss {
    /* display: inline-block;
    margin: 5px 70px; */

}

.dropdown {
    padding-top: 6px;
    margin-right: 15px;
    margin-left: 100px;
}

.avatar {
    /* display: block; */
    margin: -8px;
    /* align-items: right; */
    /* position: absolute;
    left: 360vh; */
}


.el-dropdown-link {
    cursor: pointer;
    color: #030405;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>